<template>
	<view class="py-[20rpx]">
		<view class="text-[#E86D00] bg-[#FFEEDE] text-[28rpx] py-[18rpx] px-[20rpx]">
			    温馨提示：每个信息最多可修改3次，请仔细确认
		</view>
	<view  class="bg-[#fff] pt-[10rpx] mt-[20rpx] px-[20rpx]">
		<view @click="open()" class="boderbotom h-[106rpx] flex justify-between items-center ">
			<view class="">
				备注
			</view>
			<view class="flex items-center">
				<view class="">
					<up-input v-model="mode.remarks"  Color="#fff" border="none"
						inputAlign="right" size="small" placeholder=""></up-input>
				</view>
				<view class="ml-[10rpx]">
					<u-icon top="0rpx" name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
	</view>
	<view class="bg-[#fff] pt-[10rpx] px-[20rpx]">
		<view  class="boderbotom h-[106rpx] flex justify-between items-center ">
			<view class="">
				收货号码
			</view>
			<view class="flex items-center">
				<view class="">
					<up-input v-model="mode.userPhone"  disabledColor="#fff" border="none"
						inputAlign="right" size="small" placeholder="请输入收货号码" type="number"></up-input>
				</view>
				<view class="ml-[10rpx]">
					<u-icon top="0rpx" name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
	</view>
	<view class="bg-[#fff] pt-[10rpx] px-[20rpx]">
		<view  class="boderbotom h-[106rpx] flex justify-between items-center " @click="showtableware = true">
			<view class="">
				餐具数量
			</view>
			<view class="flex items-center">
				<view class="">
					<up-input v-model="mode.dishNumber"  :disabled="true"    disabledColor="#fff" border="none"
						inputAlign="right" size="small" placeholder="请输入餐具数量" type="number"></up-input>
				</view>
				<view class="ml-[10rpx]">
					<u-icon top="0rpx" name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
	</view>
	<view class="bg-[#fff] pt-[10rpx] ">
		<view  class=" h-[106rpx] flex justify-between items-center pl-[20rpx]">
			<view class="">
				付款方式
			</view>
			<view class="">
				
				<view class="ml-[10rpx]">
					<u-radio-group v-model="mode.payType" placement="row">
						<u-radio :customStyle="{marginRight:'20rpx'}" activeColor="#FE861C"
							v-for="(item, index) in radiolist" :key="index" :label="item.name" :name="item.type"
							@change="radioChange">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
	</view>
	<view class="mt-[40rpx]" @click="editorderds()" style="padding: 0 20rpx;">
		<up-button color="#FE861C"  shape="circle" :customStyle="{height:' 96rpx',borderRadius:'20rpx',fontSize:'32rpx'}">提交</up-button>
	</view>
	
	
	
	<!-- 备注 -->
		<u-popup  :closeable="true" :show="show" @close="close" @open="open">
				            <view class="">
				               <view class="h-[900rpx]">
				               	<view class="mt-[30rpx] ml-[25rpx]">
				               		填写备注
				               	</view>
								<view class="" style="position: relative;">
									<view class="px-[25rpx] py-[30rpx]">
									<u--textarea v-model="mode.remarks"  
									maxlength="50"  placeholder="请输入订单备注内容" ></u--textarea>
								</view>
								<view class="" style="position: absolute; right: 20rpx;bottom: 10rpx; color: #c0c4cc">
									{{mode.remarks.length>=50?50:mode.remarks.length}}/50
								</view>
								</view>
								
								
								<view class="" 
								style="padding: 20rpx 20rpx;
								position: fixed;
								bottom: 20rpx;width: calc(100% - 20rpx) ;left-0;box-sizing: box-border;
								">
								<view class="" @click="submint()" style="padding: 0 20rpx;">
									<up-button color="#FE861C"  shape="circle" :customStyle="{height:' 96rpx',borderRadius:'20rpx',fontSize:'32rpx'}">确认</up-button>
								</view>
								
								</view>
				               </view>
				            </view>
						</u-popup>
	</view>

 <!-- 餐具选择 -->
		 	<u-picker @cancel="showtableware = false" 
			@confirm="tablewares" 
			:show="showtableware" 
			:columns="columnstableware"></u-picker>
</template>

<script setup> 
	import {
		ref,
		reactive,
		onMounted,
	} from 'vue'
	import {
		editorderd,oredrDitils
	} from "@/api/order.js"
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	const showtableware = ref(false)
	const columnstableware = reactive([
	  ['无需餐具', '需要餐具，商家依据餐量提供', '1份', '2份', '3份', '4份', '5份', '6份', '7份', '8份', '9份', '10份']
	]);
	const tablewares = (e)=>{
		console.log("sdds",e.value[0]);
		mode.value.dishNumber = e.value[0]
		showtableware.value = false
	}
	
	//选择支付方式
	const radiolist = reactive([{
			name: '微信支付',
			disabled: false,
			type: 1
		},
		// {
		// 	name: '余额支付',
		// 	disabled: false,
		// 	type: 2
		// },
	])
	
	const radioChange = (n) => {
		mode.value.payType = n
		console.log('radioChange', n);
	};
	onLoad((e) => {
		mode.value.orderId = e.orderId
		// console.log("当前订单好", dataList.orderId);
		Ditils()
	})
	
	let mode = ref({
		orderId:'',
			payType:'',
			  remarks:'',
			  userPhone:'',
			  dishNumber:'',
		
	})
	//获取订单详情
	let Ditils = ()=>{
		oredrDitils({orderId:mode.value.orderId}).then(res=>{
			mode.value.payType = res.result.orderInfo.payType
			mode.value.remarks = res.result.orderInfo.orderContent.remarks
			mode.value.userPhone = res.result.orderInfo.orderContent.userPhone
			mode.value.dishNumber = res.result.orderInfo.orderContent.dishNumber
			// console.log("获取订单详情",mode.value.orderContent);

			
		})
	}
    let show = ref(false)
	let open = () => {
		show.value = true
	}
	let close = ()=>{
		show.value = false
	}
	let submint = ()=>{
		show.value = false	
	}
	
	const editorderds = ()=>{
		editorderd({...mode.value}).then(res=>{
			if(res.code == 200){
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
				uni.reLaunch({
					url:'/page_order/orderDetalis/orderDetalisNomap/orderDetalisNomap?orderNo=' + mode.value.orderId
				})
				
			}
			
		})
	}
</script>

<style lang="scss">
	.boderbotom {
		border-bottom: 1rpx solid #efefef;
	}
</style>